<template>
  <div>
    <div class="colorBox" :style="{'backgroundColor':`rgb(${r} ,${g} , ${b})`}"></div>
    <div>
      R:<input type="range" v-model="r" max="250" />
      G:<input type="range" v-model="g" max="250" />
      B:<input type="range" v-model="b" max="250" />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      r: 200,
      g: 100,
      b: 50
    }
  }
}
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>
